import {
  ContentChild,
  Directive,
} from '@angular/core';
import { FloatingInputDirective } from './floating-input.directive';

@Directive({
  selector: '[appFloatingContainer]',
  host: {
    // Remove align attribute to prevent it from interfering with layout.
    '[class.floating-container]': 'true',
    '[class.floating-focused]': '_floatingInputChild.focused',
    '[class.floating-empty]': '_floatingInputChild.empty',
    '[class.floating-value]': '!_floatingInputChild.empty',
    '(click)': '_focusInput()',
  },
})
export class FloatingContainerDirective {
  @ContentChild(FloatingInputDirective) _floatingInputChild: FloatingInputDirective;

  constructor() {
  }

  /** Focuses the underlying input. */
  _focusInput() { this._floatingInputChild.focus(); }
}
